<template>
  <div class="new_song">
    <div class="new_text">
      <p>新歌首发</p>
      <div class="song_sort">
        <span :class="{ line_w: sort_line == 1 }" @click="click_sort(1)">
          <span>华语</span>
          <span></span>
        </span>
        <span :class="{ line_w: sort_line == 2 }" @click="click_sort(2)">
          <span>欧美</span>
          <span></span>
        </span>
        <span :class="{ line_w: sort_line == 3 }" @click="click_sort(3)">
          <span>日韩</span>
          <span></span>
        </span>
      </div>
      <div class="pagination">
        <span class="iconfont icon-xiangzuo1" @click="reduce"></span>
        <span>{{ count }}</span>
        <span>/</span>
        <span>3</span>
        <span class="iconfont icon-xiangzuo11" @click="add"></span>
      </div>
    </div>
    <div class="new_song_swiper">
      <ul>
        <li
          v-for="(index, id) in new_song.info"
          :key="index.id"
          :class="{ bg_color: bg == id }"
          @mouseenter="bg_en(id)"
          @mouseleave="bg_le"
        >
          <img class="img_scale" v-lazy="index.album_sizable_cover" alt="" />
          <div class="song_info">
            <p>{{ index.filename[0] }}</p>
            <p>{{ index.filename[1] }}</p>
          </div>
          <span
            class="one iconfont"
            :class="[play_active == index.album_id ? 'icon-ziyuanldpi' : 'icon-24gl-play']"
            @click="play(index.hash, index.album_id, index.album_audio_id, id)"
          ></span>
          <img class="tow" src="@/assets/不知名图标.png" alt="" />
        </li>
      </ul>
    </div>
    <!-- 播放盒子 -->
    <play
      :img="this.list.img"
      :name="this.list.audio_name"
      :url="this.list.play_url"
      v-show="buttom_show"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      buttom_show:false,

      sort_line: 1,

      count: 1,

      play_active: null,

      list: {},

      bg: null,
    };
  },
  mounted() {
    this.getdata(this.sort_line, this.count);
  },
  methods: {
    async getdata(index, index_1) {
      await this.$store.dispatch("new_song", {
        pagesize: 9,
        type: index,
        page: index_1,
      });
    },
    click_sort(index) {
      this.sort_line = index;
      this.count = 1;
      this.getdata(index, this.count);
    },
    add() {
      if (this.count == 3) {
        this.count = 3;
      } else {
        this.count += 1;
        this.getdata(this.sort_line, this.count);
      }
    },
    reduce() {
      if (this.count == 1) {
        this.count = 1;
      } else {
        this.count -= 1;
        this.getdata(this.sort_line);
      }
    },
    //获取歌曲播放信息
    async play(a, b, c, d) {
      await this.$store.dispatch("song_info", {
        hash: a,
        ablumid: b,
        albumaudioid: c,
      });
      this.list = this.song_info;
      //控制播放键样式
      this.play_active = b;
      //控制播放盒子的显示与隐藏
      this.buttom_show = true;
    },
    bg_en(index) {
      this.bg = index;
    },
    bg_le() {
      this.bg = null;
    },
  },
  computed: {
    ...mapState({
      new_song: (state) => state.song.new_song,
      song_info: (state) => state.song.song,
    }),
  },
};
</script>

<style lang="less">
.new_song {
  .new_text {
    display: flex;
    p {
      width: 120px;
      font-size: 30px;
    }
    .song_sort {
      display: flex;
      width: 300px;
      margin-right: 460px;
      align-items: flex-end;
      text-align: center;
      span {
        cursor: pointer;
      }
    }
    .pagination {
      display: flex;
      width: 120px;
      align-items: flex-end;
      span {
        cursor: pointer;
        font-size: 16px;
      }
      span:nth-child(2),
      span:nth-child(1) {
        text-align: right;
      }
      span:nth-child(3) {
        text-align: center;
      }
      span:nth-child(4),
      span:nth-child(5) {
        text-align: left;
      }
    }
  }

  .new_song_swiper {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        display: flex;
        cursor: pointer;
        width: 300px;
        height: 62px;
        align-items: center;
        margin-top: 20px;
        .song_info {
          width: 165px;
          margin-left: 10px;
          p {
            width: 165px;
            height: 25px;
            line-height: 25px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          p:nth-child(1) {
            font-size: 14px;
          }
          p:nth-child(2) {
            font-size: 12px;
          }
        }
        img {
          width: 62px;
          height: 62px;
          overflow: hidden;
          border-radius: 5px;
        }
        .one {
          height: 24px;
          width: 24px;
          line-height: 24px;
          font-weight: bold;
          padding-right: 20px;
        }
        .tow {
          height: 24px;
          width: 24px;
        }
      }
    }
  }
  .line_w {
    span:nth-child(1) {
      font-weight: bold;
      display: block;
      margin-bottom: 3px;
    }
    span:nth-child(2) {
      display: flex;
      width: 10px;
      border-radius: 1.5px;
      height: 3px;
      background-color: #00a9ff;
      margin: 0 auto;
    }
  }
  .bg_color {
    .img_scale{
      transform: scale(110%,110%) ;
    }
    .song_info{
      p {
        color: #00a9ff;
      }
  }
  }
}
</style>